<!-- 收藏列表 -->
<template>
	<view class="content page" :class="{pb:manage}" :style="{'--color': color}">
		<backTop v-if='showGoTop'></backTop>
	
		<view class="flex-box">
			<view class="myTabsBox flex-box boxsShadow flex-between">
				<view class="myTabs flex-box align-center spaceAround relative">
					<view class="tabItem flex" @click="tabChk(index)" v-for="(item,index) in tabs" :key="index">
						<text class="thmeTxt" :data-num='item.num' :class="{thmeColor:currTab == index,unread:item.num>0}">{{item.name}}</text>
					</view>
					<view class="tabItem flex" @click="getCollectLessonList" v-if='lesson_config == 1'>
						<text class="thmeTxt" :class="{thmeColor:currTab == 2}">课程</text>
					</view>
					<view class="thmeBg linear bott" :style="{left:(currTab*50+25)+'%','--color': color}"></view>
				</view>
				
				<view class="flex-box searchBox2 align-center" :class="{end:!manage}">
					<template v-if='(currTab==0 && cllgoodsList.length > 0) || (currTab==1 && cllArtList.length > 0)'>
						<text class="manageBtn" @click="fufill" :class="manage?'thmeBorder thmeColor searchState':'color666'" >{{manage?'完成':'管理'}}</text>
						<!-- <text class="line" v-if='!manage'>|</text> -->
					</template>
					<!-- <text @click="searching=true" v-if='!manage' class="iconfont icon-sousuo thmeInfo color666"></text> -->
				</view>
			</view>
			<view class="myTabsBox flex-box searchBox align-center" :class="searching?'left0':'left100'" :style="{top:totalHeight+'px'}">
				<view class="flex search flex-box thmeBorder align-center" >
					<text class="iconfont icon-sousuo thmeInfo color666"></text>
					<input class="flex" type="text" confirm-type="search" @confirm="confirm" placeholder="输入搜索关键词" />
				</view>
				<view class="thmeBg cancelSearch white linear" @click="searching=false">取消</view>
			</view>
		</view>
		
		<!-- 收藏商品列表 -->
		<view class="CollectList" v-if='currTab == 0'>
			<template v-if='cllgoodsList.length>0'>
				<view class="CollectItem flex-box boxsShadow" @click="delCollect(index,0,item.goods_id)"
				 v-for="(item,index) in cllgoodsList" :key='index'>
					<view class="toRight myStore" v-if='vid == item.store_id' >我的店</view>
					<view v-if='manage' class="manageBox flex-box align-center thmeBorder" :class="item.checked?'checked':''" >
						<text v-if='item.checked' class="iconfont white icon-xuanzhong thmeColor" ></text>
					</view>
					<image class="goodsImg" @error="item.img=''" :src="item.img?$imgUrls(item.img):staticUrl+'/images/imageLoading.png'" mode="aspectFill"></image>
					<view class="goodsMsg flex flex-box flex-between">
						<view class="bgWhite flex msg">
							<view class="goodsName lines2">{{item.name}}</view>
							<view class="goodsInfo lines">{{item.info}}</view>
						</view>
						<view class="priceBox flex-box flex-between align-center">
							<view>
								<text class="price myPrice">{{item.price}}</text>
							</view>
							<text class="iconfont icon-more"></text>
						</view>
					</view>
				</view>
			</template>
			<emptys v-if='noData'  :title='msg'></emptys>
		</view>
		
		<!-- 收藏文章列表 -->
		<view class="articleList" v-if='currTab == 1'>
			<template v-if='cllArtList.length > 0'>
				<view @click="delCollect(index,1,item1.website_article_id)" class="artItem boxsShadow radius flex-box padding2" v-for="(item1,index) in cllArtList" :key='index'>
					<view v-if='manage' class="manageBox flex-box align-center thmeBorder" :class="item1.checked?'checked':''" :style="{'--color': color}">
						<text v-if='item1.checked' class="iconfont white icon-xuanzhong thmeColor" :style="{'--color': color}"></text>
					</view>
					<image class="artImg radius" @error="item1.website_article_img=''" :src="item1.website_article_img?$imgUrls(item1.website_article_img): staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
					<view class="flex flex-box column flex-between">
						<view>
							<view class="artName lines2 thmeTxt">{{item1.website_article_title}}</view>
							<view class="artInfo lines thmeInfo">{{item1.website_article_info}}</view>
						</view>
						<view class="scBox flex-box flex-between">
							<view class="flex-box align-center">
								<text class="iconfont icon-xingxing1 thmeInfo"></text>
								<text class="thmeInfo" :class="{MORE:parseInt(item1.collect_num)>999}">{{parseInt(item1.collect_num)>999?999:parseInt(item1.collect_num)}}</text>
								<text class="iconfont icon-browse thmeInfo"></text>
								<text class="thmeInfo" :class="{MORE:parseInt(item1.website_article_views)>999}">{{parseInt(item1.website_article_views)>999?999:parseInt(item1.website_article_views)}}</text>
							</view>
							<text class="iconfont icon-more thmeInfo"></text>
						</view>
					</view>
				</view>
			</template>
			<emptys  v-if='noData1' :title='msg'></emptys>
		</view>
		
		<!-- 收藏课程列表 -->
		<view class="lessonList" v-if='currTab == 2'>
			<navigator v-for="(item,index) in classList" :key='index' :url="'/orderPage/coursePay/myCollectList?cid='+item.class_id" hover-class="none" class="lesssonItem">
				<image @error="item.class_img = ''" :src="item.class_img?$imgUrls(item.class_img):staticUrl+'/images/imageLoading.png'" mode="aspectFill" class="lessonImg"></image>
				<view class="flex">
					<view class="tag" :style="{'background-color': color}"></view>
					<view class="lesson-title lesson-title-sm lines">{{item.class_name}}</view>
					<view class="lesson-info line2">{{item.class_info}}</view>
					<view class="tags">
						<text class="green">收藏({{item.count}})</text>
					</view>
				</view>
			</navigator>
			<emptys title='你还没有收藏任何课程哦 ~'></emptys>
		</view>
		
		<!-- 全选/删除 -->
		<view class="fixedBottom bgWhite boxsShadow" :class="{showBtn:manage}">
			<view class=" flex-box flex-between align-center">
				<view class="flex-box align-center">
					<text class="chkBox flex-box align-center" :class="{thmeBorder:allChecked}" @click="allCheck" >
						<text v-if='allChecked' class="iconfont icon-xuanzhong color666" :class="{thmeColor:allChecked}"></text>
					</text>
					<text class="thmeTxt">全选</text>
				</view>
				<text class="thmeTxt" @click="canelCol">取消收藏</text>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<template v-if='noData && currTab == 0'>
			<view class="youLike" v-if='likeList'>
				<view class="flex-box flex-center align-center youTitle">
					<text class="toLeft" ></text>
					<text class="toLeft" ></text>
					<view>猜你喜欢</view>
					<text class="toRight" ></text>
					<text class="toRight" ></text>
				</view>
				<GoodsList hot='0' type='1' :goodsData='likeList'></GoodsList>
			</view>
		</template>
		<showModel v-if='showModal' @cancelFunc='showModal=false' type='99'
		@certain='del'
		title='是否确定取消收藏？' 
		msg='取消后将不可恢复'
		btn1='取消' 
		btn2='我很确定'></showModel>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import GoodsList from "../../components/goodsList.vue"
	export default{
		components:{
			GoodsList
		},
		data(){
			return{
				type:5,
				staticUrl: this.staticUrl,
				
				showGoTop:false,
				searching:false,// 是否为搜索状态
				searchKey:'',

				tabs:[
					{name:'',state:0,num:0},
					{name:'文章',state:0,num:0},
					// {name:'视频',state:0}
				],
				currTab: 0,
				noData: false,
				noData1:false,
				msg:'',
				manage: false,// 是否编辑状态 true是
				delIndex:-1 ,// 删除索引
				showModal:false,
				allChecked: false,// 是否全选
				delIds:[], // 要删除的id
				cllgoodsList: [],// 收藏的商品列表
				cllArtList: [],// 藏的文章列表
				
				
				lesson_config: 0,
				likeList:'',
				
				classList:'',
				noData3: false
			}
		},
		onPageScroll(e){
			if(e.scrollTop > 200){
				this.showGoTop = true;
			} else {
				this.showGoTop = false;
			}
		},
		onShow(){
			this.currTab = 0;
			this.manage = false;
			this.page = 1;
			this.cllgoodsList = [];
			this.getCollectList();
			this.msg = '你还没有收藏任何'+this.nameDefinition.goodsName+'哦~'
			this.tabs[0].name = this.nameDefinition.goodsName
		},
		onLoad() {
			this.getUlike()
		},
		
		methods:{
			getUlike() { // 猜你喜欢
				this.$http.post({
					url: '/singleSaleApi/guessLikeGoods',
				}).then(res => {
					if (res.data) {
						this.likeList = res.data;
					}
				}) 
			},
			getCollectList(){ // 收藏商品列表
				this.noData = false;
				this.more = false;
				this.tabs[0].num = 0;
				var param = {
					pageNum: 10,
					page: this.page,
					is_collect:1,
				}
				if(this.searching){ // 搜索状态
					param.name = this.searchKey
				}
				this.$http.get({
					url: '/singleSaleApi/sortClassGoods',
					data: param
				}).then(res => {
					if(res.code == 100 && res.data.DataArr){
						if(res.data.DataArr.length > 9){
							this.more = true;
							this.page ++
						}
						this.tabs[0].num = res.count;
						this.cllgoodsList = this.cllgoodsList.concat(res.data.DataArr);
					}
					if(!this.cllgoodsList || this.cllgoodsList.length < 1){
						this.noData = true;
					}
				})
			},
			getCollectArtList(){// 收藏文章
				this.noData1 = false;
				this.more = false;
				this.tabs[1].num = 0;
				var param = {
					bid: uni.getStorageSync('bid'),
					v_id: uni.getStorageSync('vid'),
					is_collect:1,
				}
				if(this.searching){ // 搜索状态
					param.keywords = this.searchKey
				}
				this.$http.get({
					url: '/zzj_singleSaleApi/getArticle',
					data: param
				}).then(res => {
					if(res.errcode == '00000' && res.data){
						this.tabs[1].num = res.count;
						if(res.data.length > 9){
							this.more = true
							this.page ++
						}
						this.cllArtList = this.cllArtList.concat(res.data);
					}
					if(!this.cllArtList || this.cllArtList.length < 1){
						this.noData1 = true;
					}
				})
			},
			confirm(e){
				if(e.detail.value.trim() == '' || !e.detail.value){
					uni.showToast({title:'请先输入搜索关键词哦',icon:'none'})
					return
				}
				this.page = 1;
				this.searchKey = e.detail.value
				if(this.currTab == 0){ // 搜索商品
					this.cllgoodsList = [];
					this.getCollectList()
				}
				if(this.currTab == 1){ // 搜索文章
					
				}
			},
			canelCol(){
				this.delIds = [];
				if(this.currTab == 0){ // 取消商品
					var i=0,len = this.cllgoodsList.length;
					this.cllgoodsList.forEach((item,index)=>{
						if(item.checked == true){
							i++;
							this.delIds.push(item.goods_id)
						}
					})
				}
				if(this.currTab == 1){ // 取消文章
					var i=0,len = this.cllArtList.length;
					this.cllArtList.forEach((item,index)=>{
						if(item.checked == true){
							i++;
							this.delIds.push(item.website_article_id)
						}
					})
				}
				if(i<1){
					uni.showToast({title:'要选择'+this.tabs[this.currTab].name+'后才能删除哦',icon:'none'})
					return
				}else{
					this.showModal = true;
					this.type = 5
				}
			},
			allCheck(){ // 全选
				this.delIds = [];
				this.allChecked = !this.allChecked;
				if(this.currTab == 0){
					this.cllgoodsList.forEach((item,index)=>{
						item.checked = this.allChecked;
					})
					this.cllgoodsList = [].concat(this.cllgoodsList)
				}
				if(this.currTab == 1){
					this.cllArtList.forEach((item,index)=>{
						item.checked = this.allChecked;
					})
					this.cllArtList = [].concat(this.cllArtList)
				}
			},
			delCollect(index,n,id){ // n：0商品  1文章
				if(this.manage){ // 管理状态
					this.delIds = [];
					this.delIndex = index;
					this.allChecked = false;
					if(this.currTab == 0){
						if(!this.cllgoodsList[index].checked)
							this.cllgoodsList[index].checked = true
						else
							this.cllgoodsList[index].checked = !this.cllgoodsList[index].checked;
						var i = 0,len = this.cllgoodsList.length;
						this.cllgoodsList.forEach((item,index)=>{
							if(item.checked == true){
								i++;
								if(i == len){this.allChecked = true}
							}
						})
						this.cllgoodsList = [].concat(this.cllgoodsList)
					}
					if(this.currTab == 1){
						if(!this.cllArtList[index].checked)
							this.cllArtList[index].checked = true
						else
							this.cllArtList[index].checked = !this.cllArtList[index].checked;
						var i = 0,len = this.cllArtList.length;
						this.cllArtList.forEach((item,index)=>{
							if(item.checked == true){
								i++;
								if(i == len){this.allChecked = true}
							}
						})
						this.cllArtList = [].concat(this.cllArtList)
					}
				}else{
					if(n== 0){
						this.toGoods(id)
					}else{
						uni.navigateTo({
							url:'/otherPage/article/artDetail?artId='+id
						})
					}
				}
			},
			del(){ // 删除收藏
				this.delIds = this.delIds.join(',')
				if(this.currTab == 0){ // 商品
					this.$http.post({
						url: '/singleSaleApi/goods_collect',
						data: {
							goods_id: this.delIds
						}
					}).then(res => {
						if(res.code == 200){
							this.cllgoodsList = [];
							this.getCollectList();
							this.showModal = false;
						}else{
							uni.showToast({
								title: res.msg,
								icon:'none'
							})
						}
					})
				}
				if(this.currTab == 1){ // 文章
					this.$http.post({
						url: '/singleSaleApi/article_collect',
						data: {
							website_article_id: this.delIds
						}
					}).then(res => {
						if(res.code == 200){
							this.cllArtList = [];
							this.getCollectArtList();
							this.showModal = false
						}else{
							uni.showToast({
								title: res.msg,
								icon:'none'
							})
						}
					})
				}
				
			},
			fufill(){ // 完成管理
				this.manage = !this.manage;
				this.allChecked = false;
			},
			getCollectLessonList(){
				this.currTab = 2
				this.noData3 = false
				this.$http.get({
					url: '/zzj_singleSaleApi/my_collect',

				}).then(res => {
					this.showLoading = false
					if (res.code == 100) {
						this.classList = res.data
					}else{
						this.classList = ''
					}
					if (!this.classList || this.classList.length < 1) {
						this.noData3 = true
					}
				})
			},
			tabChk(index){
				this.currTab = index;
				this.page = 1;
				if(this.manage){
					this.allChecked = false;
					this.manage = false;
				}
				if(index == 0){
					this.cllgoodsList = [];
					this.getCollectList();
					this.msg = '你还没有收藏任何'+this.nameDefinition.goodsName+'哦~'
				}else{
					this.cllArtList = [];
					this.getCollectArtList();
					this.msg = '你还没有收藏任何文章哦~'
				}	
			}
		},
		computed:{
			...mapState(['vid','color','totalHeight','System','nameDefinition'])
		},
		onShareAppMessage(res) {
		    let shareData = uni.getStorageSync('shareData');
		    return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index',
				imageUrl: shareData.imageUrl
		    }
		},
		onShareTimeline(item) {
		   let shareData = uni.getStorageSync('shareData');
		   return {
				title: shareData.desc,
				query: {test:1},
				imageUrl: shareData.imageUrl
		   }
		},
		onReachBottom() {
			if(this.more){
				if(this.currTab == 0){ // 更多商品
					this.getCollectList()
				}
				if(this.currTab == 1){
					this.getCollectArtList()
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.thmeInfo{color: #232323;}
	.column{flex-direction: column;}
	.color666{color: #666666;}
	.boxsShadow{box-shadow: 0 0 10rpx 2rpx rgba(105,105,105,.12);}	// 阴影
	
	.CollectList,.articleList,.lessonList{
		padding: $uni-page-space;
		padding-top: 100rpx;
	}
	.lessonList{
		.lesssonItem{
			padding: $uni-page-space;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			box-shadow:  0 0 3px 0 rgba(0,0,0,.1);
			margin-bottom: $uni-page-space;
			display: flex;
			position: relative;
			.lessonImg{
				width: 200rpx;
				height: 200rpx;
				margin-right: $uni-page-space;
			}
			.tags{
				margin-top: 20rpx;
				text{
					margin-right: 10rpx;
					line-height: 36rpx;
					border-radius: 36rpx;
					height: 36rpx;
					display: inline-block;
					font-size: 24rpx;
					padding: 0 16rpx;
				}
				.green{	
					background-color: #E3FBF0;
					color: #01D475;
				}
				.yellow{
					background-color: #FEF7EB;
					color: #F8AD24;
				}
				.red{
					background-color: #FEEFEF;
					color: #DE5858;
				}
				.gray{
					background-color: #EEEEEE;
					color: #666666;
				}
				.price {
					padding: 0;
					margin-right: 0;
					color: #FF0000;
					font-size: 34rpx;
					font-weight: bold;
				}
			}
			.tag{
				position: absolute;
				width: 24rpx;
				top: 0;
				height: 20rpx;
				right: 20rpx;
				background-color: $tag-bg;
				border-radius: 0 0 8rpx 8rpx;
				margin-bottom: 20rpx;
			}
			.lesson-title{
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				line-height: 48rpx;
				text-align: justify;
			}
			.lesson-title-sm{
				font-size: 28rpx;
			}
			.lesson-info{
				font-size: 24rpx;
				color: #666666;
				text-align: justify;
			}
			
			// 学习中
			.study{
				padding-right: 70rpx;
			}
			.studying{
				color: #01D475;
				background-color: #E3FBF0;
				line-height: 36rpx;
				font-size: 24rpx;
				height: 36rpx;
				display: block;
				padding: 0 4rpx 0 12rpx;
				border-radius: 32rpx 0 0 32rpx;
				position: absolute;
				right: 0;
				top: 20rpx;
			}
		}
	}
	.pb{padding-bottom: 100rpx;}
	.unread{
		line-height: initial;
		&::after{left: 80%;top: -6rpx;}
	}
	/* tabs */
	.myTabsBox{position: fixed;top: 0;left: 0;right: 0;z-index: 7;background-color: #FFFFFF;height: 80rpx;padding: 0 $uni-page-space;}
	.myTabs{width: 45%;position: relative;}
	.tabItem{height: 80rpx;line-height: 80rpx;text-align: center;
		.thmeColor{font-size: 32rpx;font-weight: bold;}
	}
	.bott{
		position: absolute;
		width: 44rpx;
		height: 6rpx;
		border-radius: 6rpx;
		left: 5.5%;
		bottom: 0;
		margin-left: -22rpx;
		transition: left .3s;
	}
	
	// 搜索
	.left100{left:100%}
	.left0{left:0}
	
	.searchBox{
		transition: all .3s;
		z-index: 10;
		.search{
			height: 60rpx;padding: 0 20rpx;
			.icon-sousuo{font-size: 32rpx;margin-right: 10rpx;}
			input{height: 100%;position: relative;z-index: 10;}
		}
	}
	.cancelSearch{overflow: hidden;
		width: 110rpx;line-height: 60rpx;border-radius: 60rpx;text-align: center;margin-left: 24rpx;
		&::after{transform: rotate(45deg) translateY(-20rpx);height: 170%;margin-left: -14rpx;}
	}
	.searchBox2{
		height: 50rpx;
		width: 120rpx;
		align-self: center;
		&.end{
			justify-content: flex-end;
		}
		.line{color: #CCCCCC;transform: scale(0.7);margin: 0 14rpx;}
		.icon-sousuo{font-size: 30rpx;}
		.manageBtn{width: 60rpx;line-height: 36rpx;height: 36rpx;transition: all 0.3s;text-align: right;}
		.searchState{
			width: 120rpx;text-align: center;border-radius: 40rpx;
		}
	}
	.manage{
		padding-top: 20rpx;
		justify-content: flex-end;
		.iconfont{
			font-size: 34rpx;margin-right: 10rpx;
		}
	}
	.youLike{background-color: #f5f5f5;}
	
	.goodsImg{
		width: 200rpx;height: 200rpx;
	}
	.CollectItem{margin-bottom: 36rpx;position: relative;overflow: hidden;
		border-radius: 10rpx;
		.myStore{
			position: absolute;left: 0;bottom: 0;z-index: 2;padding: 0 14rpx;
			line-height: 36rpx;color: white;text-align: center;border-radius: 0 10rpx 0 0 ;
		}
	}
	.manageBox{
		justify-content: center;
		background: rgba(255,255,255,.4);
		width: 34rpx;height: 34rpx;border-radius: 50%;position: absolute;top: 8rpx;left: 8rpx;z-index: 5;border: 2rpx solid white;
		&.checked{
			background: rgba(255,255,255,1);
		}
		.icon-xuanzhong{
			font-size: 24rpx;
			margin-top: 0;
		}
	}
	.goodsMsg{
		position: relative;
		flex-direction: column;
		.priceBox{padding: 0 20rpx 14rpx 20rpx;background-color: #FFFFFF;}
		.msg{padding: 14rpx 20rpx 0 20rpx;background-color: #FFFFFF;}
		.gl{border-radius:0 148rpx 0 0;padding-right: 70rpx;}
		.goodsName{font-size: 26rpx;line-height: 36rpx;margin-bottom: 10rpx;text-align: justify;padding-right: 20rpx;color: #232323;}
		.goodsInfo{font-size: 22rpx;color: #999999;}
		.price{font-size: 36rpx;color: $uni-color-price;}
	}
	.icon-more{font-size: 26rpx;transform: rotate(90deg);}
	// 文章列表
	.artItem{
		padding: 6rpx;position: relative;
		overflow: hidden;margin: 0 0 40rpx 0;
		.manageBox{top: 14rpx;left: 14rpx;}
		.artImg{width: 276rpx;height: 190rpx;margin-right: 20rpx;}
		.artName{font-size: 28rpx;margin-top: 4rpx;}
		.artInfo{font-size: 22rpx;margin-top: 10rpx;}
		.scBox{
			margin-bottom: 10rpx;
			.icon-browse,.icon-xingxing1{font-size: 32rpx;margin-right: 6rpx;color: #999999!important;}
			.icon-browse{margin-left: 30rpx;position: relative;top: 4rpx;}
		}
	}
	
	.fixedBottom{
		position: fixed;
		bottom: -110rpx;
		left: 0;
		right: 0;
		transition: bottom 0.3s;
		z-index: 8;
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom);
		>view{
			padding:30rpx $uni-page-space;
		}
		&.showBtn{
			bottom: 0;
		}
		.chkBox{width: 34rpx;height: 34rpx;border: 2rpx solid #666666;border-radius: 50%;justify-content: center;margin-right: 10rpx;
			.icon-xuanzhong{font-size: 24rpx;}
		}
	}
	
</style>
